import React from 'react'
// import jsonData from '../../axios/TheCharts.json'

export default function TheCharts({ itemList }) {
    // const theCharts = jsonData
    return (
        <div className='Info'>
            {/* {console.log(itemList)} */}
            <table className="table table-hover p-3 mb-2 bg-primary text-white">
                <thead>
                    <tr>
                        <th scope="col">{itemList.col0}</th>
                        <th scope="col">{itemList.col1}</th>
                        <th scope="col">{itemList.col2}</th>
                    </tr>
                </thead>
                <tbody className='p-3 mb-2 bg-white text-dark'>
                    {/* {theCharts.data.map((item, index) => {
                        return <tr>
                            <th scope="row">{index + 1}</th>
                            <td>{item.title}</td>
                            <td>{item.content}</td>
                        </tr>
                    })} */}
                    {itemList.list.map((item, index) => <tr>
                        <th scope="row">{//前三名特有的序号图片
                            index + 1 === 1 ? <img src="/img/rank1.png" style={{ width: 36, height: 45 }} alt="..." ></img> :
                                index + 1 === 2 ? <img src="/img/rank2.png" style={{ width: 36, height: 45 }} alt="..." ></img> :
                                    index + 1 === 3 ? <img src="/img/rank3.png" style={{ width: 36, height: 45 }} alt="..." ></img> :
                                        index + 1
                        }</th>
                        <td>{item.title}</td>
                        <td>{item.content}</td>
                    </tr>
                    )}
                    <tr ><td colspan="3" style={{ cursor: "pointer" }}><a href='/RankingList' class="text-decoration-none">
                        更多排名……
                    </a></td></tr>
                </tbody>
            </table>
        </div>
    )
}
